/**
 * 学籍管理
 */

<template>
  <div class="courseBox">
    <div class="courseBoxTop">
      <!-- 搜索 -->
      <div class="courseBoxTopSearch">
        <div class="searchItem" id="courseName">
          <span>姓名：</span>
          <el-input v-model="studentName" placeholder="请输入姓名" />
        </div>
        <div class="searchItem" id="papers">
          <span>证件号码：</span>
          <el-input v-model="idCardNo" placeholder="请输入证件号码" />
        </div>
        <div class="searchItem" id="profession">
          <span>学年：</span>
          <el-select v-model="schoolYearName" placeholder="请选择学年">
            <el-option
              v-for="item in schoolYearSemesterList"
              :key="item.value"
              :label="item.schoolYearName"
              :value="item.schoolYearName"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchItem" id="version">
          <span>专业：</span>
          <el-select v-model="majorId" placeholder="请选择专业">
            <el-option
              v-for="(item, index) in majorList"
              :key="index"
              :label="item.majorName"
              :value="item.majorId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="searchItem" id="version">
          <span>状态：</span>
          <el-select v-model="learningState" placeholder="请选择状态">
            <el-option
              :label="item.typeName"
              :value="item.typeName"
              v-for="(item, index) in stateList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <div class="searchAndReset">
          <el-button class="searchBtn" @click="searchInput">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </el-button>
          <el-button class="resetBtn" @click="refreshInput">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 管理列表 -->
    <div class="courseBoxBottom">
      <div class="bottomHeader">
        <span class="title">管理列表</span>
        <div class="bottomHeaderBtn">
          <el-button class="delBtn" @click="batchDelStudentStatus">
            <i class="el-icon-close"></i>
            <span>批量删除</span>
          </el-button>
          <el-button class="exportBtn" @click="exportStudentStatus">
            <span class="icon iconfont icon-daochu"></span>
            <span>导出数据</span>
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <div class="bottomMian">
        <el-table
          ref="multipleTable"
          :data="studentStatusList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="studentName"
            label="姓名"
            min-width="100"
          ></el-table-column>
          <el-table-column prop="gender" label="性别" max-width="100">
            <template slot-scope="scope">
              {{ scope.row.gender == 0 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="identificationType"
            label="证件类型"
            min-width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.identificationTypeName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="studentIds"
            label="学号"
            max-width="100"
          ></el-table-column>
          <el-table-column
            prop="idCardNo"
            label="证件号码"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="colleageName"
            label="学院"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="majorName"
            label="专业"
            max-width="100"
          ></el-table-column>
          <el-table-column
            prop="learningState"
            label="学习状态"
            max-width="100"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          ></el-table-column>
          <el-table-column prop="action" label="操作" width="150px">
            <div class="actionImg" slot-scope="scope">
              <span
                class="icon"
                @click="goCheckStudentStatusPage(scope.row, 'edit')"
              >编辑</span>
              <span
                class="icon"
                @click="delStudentStatus(scope.row)"
              >删除</span>

              <span
                class="checkStudent"
                @click="goCheckStudentStatusPage(scope.row, 'detail')"
              >
                查看详细
              </span>
            </div>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" v-if="studentStatusList.length > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="jumper">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/styles/picture.scss";
import {
  exportApi,
  getMajorListApi,
  getStudentStatusListApi,
  delStudentStatusDetailApi,
  getSchoolYearSemesterListApi,
} from "@/api/educational/studentStatus";
import { getClassifyListApi } from "@/api/basics/classify";
export default {
  data() {
    return {
      majorList: [],
      studentStatusList: [],
      schoolYearSemesterList: [],
      stateList: [], // 学习状态列表
      total: 0,
      isCheckStudentStatus: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      schoolYearName: "",
      majorId: "",
      learningState: "",
      studentName: "",
      idCardNo: "",
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      filename: "学籍信息表",
    };
  },

  mounted() {
    // 获取学籍列表
    this.getStudentStatusList({
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    });

    // 获取专业列表
    getMajorListApi().then((res) => {
      if (res.code === 200) {
        this.majorList = res.data.filter((item) => {
          return item.status == "0";
        });
      }
    });

    // 获取学年学期
    getSchoolYearSemesterListApi().then((res) => {
      if (res.code === 200) {
        this.schoolYearSemesterList = res.rows;
      }
    });

    // 获取学习状态列表
    this.getStateList({
      parentId: 222,
    });
  },

  methods: {
    // 获取学籍列表
    getStudentStatusList(data) {
      getStudentStatusListApi(data).then((res) => {
        this.studentStatusList = res.rows;
        this.total = res.total;
      });
    },

    // 获取学习状态列表
    async getStateList(data) {
      let res = await getClassifyListApi(data);
      this.stateList = res.rows;
    },
    // 搜索
    searchInput() {
      let data = {
        studentName: this.studentName,
        idCardNo: this.idCardNo,
        schoolYearName: this.schoolYearName,
        majorId: this.majorId,
        learningState: this.learningState,
      };
      this.getStudentStatusList({
        ...data,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },

    // 重置
    refreshInput() {
      this.studentName = "";
      this.idCardNo = "";
      this.schoolYearName = "";
      this.majorId = "";
      this.learningState = "";
      this.getStudentStatusList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },

    // 已选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 删除
    delStudentStatus(data) {
      let { id } = data;
      this.$confirm("此操作将删除该学籍, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delStudentStatusDetailApi({ ids: id }).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功！");
            this.getStudentStatusList({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            });
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },

    // 批量删除
    batchDelStudentStatus() {
      if (this.multipleSelection.length) {
        let data = [...this.multipleSelection].map((item) => {
          return "" + item.id;
        });

        this.$confirm("此操作将删除已选中的学籍, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delStudentStatusDetailApi({ ids: data.join(",") }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功！");
              this.getStudentStatusList({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
              });
            } else {
              this.$message.error("删除失败！");
            }
          });
        });
      } else {
        this.$message.error("请选择要删除的学籍！");
      }
    },

    // 点击跳转 查看/编辑学籍页面
    goCheckStudentStatusPage(item, title) {
      this.$router.push({
        path: "/educational/checkStudentStatus",
        query: {
          id: item.id,
          title: title,
        },
      });
    },

    // 导出学籍
    exportStudentStatus() {
      this.$confirm("是否导出全部数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          exportApi().then((res) => {
            if (!res) return;
            const blob = new Blob([res], {
              type: "application/vnd.ms-excel",
            }); // 构造一个blob对象来处理数据，并设置文件类型
            if (window.navigator.msSaveOrOpenBlob) {
              //兼容IE10
              navigator.msSaveBlob(blob, this.filename);
            } else {
              const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
              const a = document.createElement("a"); //创建a标签
              a.style.display = "none";
              a.href = href; // 指定下载链接
              a.download = this.filename; //指定下载文件名
              a.click(); //触发下载
              URL.revokeObjectURL(a.href); //释放URL对象
            }
          });
        })
        .catch(() => {});
    },

    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getStudentStatusList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },

    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      this.getStudentStatusList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.courseBoxTopSearch {
  ::v-deep .el-input__inner {
    height: 36px;
    line-height: 36px;
  }

  .searchItem {
    float: left;
    display: flex;
    align-items: center;
    margin-right: 50px;
    margin-bottom: 20px;

    span {
      width: 100px;
      font-size: 14px;
      text-align: right;
    }
  }

  #courseName {
    float: left;
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  #papers {
    margin-right: 20px;
    span {
      width: 140px;
      font-size: 14px;
      text-align: right;
    }
  }

  #profession {
    float: left;
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  #version {
    float: left;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
}

.actionImg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .editImg {
    margin-left: 20px;
  }

  .delectImg {
    margin: 0 10px;
  }

  span {
    font-size: 12px;
    color: #1990FF;
  }
  // .icon {
  //   width: 15px;
  //   // height: ;
  //   cursor: pointer;
  //   color: #1990FF;
  // }
}

::v-deep .el-icon-date {
  line-height: 36px;
}
</style>